<template>
	<view class="content"> 
		<my-bar>
			<block slot="content">{{ title }}</block>
			<!--#ifdef MP-WEIXIN-->
			<block slot="backText"><button class="cu-btn bg-gradual-green margin-right-xs" @click.stop="postForm.id ? update() : submit()">保存</button></block>
			<!--#endif-->
			<!--#ifndef MP-WEIXIN-->
			<block slot="right"><button class="cu-btn bg-gradual-green margin-right-xs" @click.stop="postForm.id ? update() : submit()">保存</button></block>
			<!--#endif-->
		</my-bar>
		<form>
			<view class="cu-form-group margin-top-xs"> 
				<view class="title">名称</view>
				<input placeholder="请输入名称" name="name" v-model="postForm.name" class="text-right" />
			</view>
			<view class="cu-form-group margin-top-xs">
				<view class="title">上级</view>
				<uni-data-picker class="picker"
					placeholder="请选择上级"
					popup-title="请选择所在上级"
					:localdata="dataTree"
					v-model="postForm.parentId" 
					:map="{ text: 'name', value: 'id', children: 'childs' }"
				>			
				</uni-data-picker>
			</view>
			<!--
			<view class="cu-form-group margin-top-xs">
				<textarea rows="1000" :adjust-position="false" @input="textareaInput" placeholder="请输入详细内容..." class="text-right">					
				</textarea>
			</view>
			<view class="cu-bar bg-white text-grey shadow shadow-lg">
				<view class="action text-xs">{{ postForm.detail.length }}/{{ publish.contentTextCount }}</view>
				<view class="action"></view>
			</view>
			-->
		
			<!--
			<view class="cu-form-group img-list">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="viewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red text-df" @tap.stop="delImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids " @tap="chooseImage" v-if="imgList.length < publish.uploadImgCount">
						<text class="cuIcon-cameraadd">
							<text class="text-sm">{{ imgList.length }}/{{ publish.uploadImgCount }}</text>
						</text>
					</view>
				</view>
			</view>
			-->
			<!--
			<view class="cu-form-group tag-title"><text class="text-gree">#标签</text></view>
			<view class="cu-form-group padding-sm flex flex-wrap justify-around">-->
			<!-- :class="'bg-'+randomColor(index)" -->
			<!--
				<view
					class="cu-tag radius padding margin-xs"
					:class="CategoryId == item.id ? 'bg-orange' : ''"
					v-for="(item, index) in tags.list" v-if="index!=0"
					:key="index"
					:data-id="item.id"
					@click="switchTag"
				>
					{{ item.text }}
				</view>
			</view>
			-->
			<view class="cu-form-group margin-top-xs">
				<view class="title">排序</view>
				<input placeholder="请输入排序" name="order" type="number" v-model="postForm.order" class="text-right"/>
			</view>
			<radio-group class="block" @change="postForm.open = !postForm.open">
				<view class="cu-form-group">
					<view class="title">公开</view>
					<view> 
						是
						<radio class="margin-left-sm margin-right" :class="postForm.open ? 'checked' : ''" :checked="postForm.open ? true : false" value="true"></radio>
						否
						<radio class="margin-left-sm" :class="!postForm.open ? 'checked' : ''" :checked="!postForm.open ? true : false" value="false"></radio>
					</view> 
				</view>
			</radio-group>
			<app-modal ref="modal" content="主人真的要无情的抛弃我吗？" :buttons="['再想想', '残忍说再见']"></app-modal>
			<!-- <button class="cu-btn bg-red margin-tb-sm lg">发布</button> -->
		</form>
	</view>
</template>

<script>
import appModal from '@/components/my-modal/my-modal.vue';
import uniDataPicker from '@/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue';
import pageMixin from '@/mixin/page.js';
import api from '@/common/api.js';
import http from '@/common/http.js';
import { mapState } from 'vuex';
export default {
	components: {
		appModal,
		uniDataPicker
	},
	mixins: [pageMixin],
	data() {
		return {
			imgList: [], //本地选择的图片列表
			postForm: {
				//提交到服务器的的表单数据
				id: null, //增加不能传id，修改必须传id
				name: '',
				parentId: null,
				open: true,
				detail:'',
				order: 0
			},			
			dataTree: []
		};
	},
	onLoad(e) {
		this.postForm.id = e.id; //接受传递过来的参数
		if (this.postForm.id) {
			//id不为空表示修改	获取详细信息
			this.getDetail(); 
		}
		http.get(this.$store.state.pages.admin.area.list.url+"?pageSize=-1&ParentId=null").then(res=>{		
			this.dataTree.push.apply(this.dataTree, res.data.items);
			//console.error(JSON.stringify(res.data.items))
		}) 
	},
	methods: {
		textareaInput(e) {
			this.detail = e.detail.value;
		},
		//验证规则检查
		check() {
			//验证规则
			let validRules = [
				{
					name: 'name',
					title: '名称',
					required: true
					/*minLength: 4*/
				}				
			];
			return this.$validate.valid(this.postForm, validRules);
		},
		submit(e) {
			//提交
			this.$util.msg('nihhhhdsee电风扇分数段樊登读书是');
			//提前检查是否登录
			if (!api.checkLogin()) {
				return false;
			}
			//验证规则检查
			var r = this.check();
			if (!r.isOk) {
				this.$util.msg(r.msg);
				return;
			}
			var that = this;
			function save() {
				//保存方法
				api.submit(
					that.$store.state.pages.admin.area.add.url, //提交的服务器api地址
					that.postForm, //提交的表单数据
					function() {
						//回调函数：保存成功跳转到列表页面
						that.$util.goTo(that.$store.state.pages.admin.area.list.path);
					}
				);
			}
			if (this.imgList.length > 0) {
				//有图片则先上传图片
				api.upload({
					path: that.imgList[0],
					callback: function(res) {
						res = JSON.parse(res.data);
						if (!res.status) {
							that.$util.msg(res.msg);
						} else {
							//再提交保存
							that.postForm.pic = res.data.path; //将上传后的图片地址保赋值给要提交的表单数据
							save();
						}
					}
				});
			} else {
				//否则直接保存
				save();
			}
		},
		getDetail() {
			//修改 获取详细信息

			http.get(this.$store.state.pages.admin.area.detail.url + '/' + this.postForm.id).then(res => {
				if (res.status) {
					Object.assign(this.postForm, res.data); //将获取的数据复制到表单对象
				}
			});
		},
		update() {
			//修改
			//提前检查是否登录
			if (!api.checkLogin()) {
				return false;
			}
			//验证规则检查
			var r = this.check();
			if (!r.isOk) {
				this.$util.msg(r.msg);
				return;
			}

			http.post(this.$store.state.pages.admin.area.update.url, this.postForm).then(res => {
				this.$util.msg(res.msg);
				this.$util.goTo(this.$store.state.pages.admin.area.list.path);
			});
		},
		chooseImage() {
			var that = this;
			uni.chooseImage({
				count: that.publish.uploadImgCount, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					if (this.imgList.length != 0) {
						this.imgList = this.imgList.concat(res.tempFilePaths);
					} else {
						this.imgList = res.tempFilePaths;
					}
				}
			});
		},
		viewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		delImg(e) {
			var that = this;
			this.$refs.modal.open(function() {
				that.imgList.splice(e.currentTarget.dataset.index, 1);
			});
		},
		randomColor(idx) {
			if (idx >= this.colors.length) {
				idx = idx % this.colors.length;
			}
			return this.colors[idx];
		}
	},
	computed: {
		...mapState('base', ['tags', 'publish', 'colors']),
		title() {
			return this.postForm.id ? this.$store.state.pages.admin.area.update.text : this.$store.state.pages.admin.area.add.text;
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
}

.cu-form-group {
	/*border: none;*/
}
.cu-form-group.title {
	/*border-bottom: 1px solid #eee;*/
}
.cu-form-group textarea {
	height: 200rpx;
}
.cu-form-group + .cu-form-group {
	/*border-top: 0;*/
}

.cu-form-group.tag-title {
	margin-top: 35rpx;
	border-top: 1px solid #eee;
}

.cu-form-group .title {
	min-width: calc(4em + 15px);
}

.cu-bar .action.text-xs {
	font-size: 12px;
}

.img-list {
	padding-top: 14px;
}

/*数据列表*/
.picker /deep/ .input-value-border{
	border:none
}

</style>
